<template>
  <view>
    <view class="u-m-l-25 u-m-r-25 u-p-l-20 u-back-white passway_box">
      <view class="u-flex u-row-between u-p-l-10">
        <view class="u-text-center" v-for="item in list" :key="item.name" @click="goModule(item)">
          <u-image :src="item.src" width="68" height="68"></u-image>
          <view class="u-m-t-10">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="u-m-25 u-flex u-row-between">
      <view class="u-m-r-20 u-flex-1 u-p-20 u-radius-20 u-back-white u-flex u-row-between" @click="goCenter(1)">
        <u-image src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20250606207098936188.png" width="48"
          height="60"></u-image>
        <view class="u-m-l-15 u-m-b-5 u-flex-1">
          <view class="u-color-puce">青创私董</view>
        </view>
      </view>
      <view class="u-flex-1 u-p-20 u-radius-20 u-back-white u-flex u-row-between" @click="goCenter(2)">
        <u-image src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20250606391748677614.png" width="48"
          height="60"></u-image>
        <view class="u-m-l-15 u-m-b-5 u-flex-1">
          <view class="u-color-puce">青创分汇</view>
        </view>
      </view>
      <!-- <view
				class="u-m-r-10 u-flex-1 u-p-l-20 u-p-r-20 u-p-t-6 u-p-b-6 u-radius-20 u-back-white u-flex u-row-between"
				@click="goCenter(3)">
				<u-image src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20250606977512658956.png"
					width="48" height="60"></u-image>
				<view class="u-m-l-15 u-m-b-5 u-flex-1">
					<view class="u-color-puce">青创分汇</view>
				</view>
			</view> -->
    </view>
    <view class="u-m-25 u-m-t-30">
      <view class="u-m-b-20 u-flex u-row-between" >
        <view class="u-flex" style="gap: 5px;">
          <view class="u-font-32  u-flex u-col-bottom">
            <view class="line_left"></view>
            <view>{{ shop_name ? shop_name : '青创云店' }}</view>
          </view> 
          <view v-if="userData.mall.is_update == 1" style="color: #B3723E;" @click="setShopName">修改</view>
        </view>
        <view class="u-font-26 u-color-gray" @click="goGoodsShop">全部商品 ></view>
      </view>
      <view class="u-back-white u-p-20 u-radius-20">
        <scroll-view scroll-x="true" style="height: 340rpx;">
          <view class="recommendItem" v-for="item in goodsList" :key="item.id" @click="goGoodDetail(item.id)">
            <view class="content">
              <view>
                <u-image width="100%" height="200rpx" border-radius="10" :src="item.head_image[0]"></u-image>
                <view class="u-m-t-15">{{ item.name }}</view>
              </view>
              <view class="u-m-t-5 u-flex u-row-between">
                <view class="u-color-red u-font-bold">
                  <span class="u-font-22">¥</span>
                  <span class="u-font-28">{{ item.vip_price }}</span>
                  <span class="u-m-l-10 u-font-20 u-color-gray u-font-line">¥{{ item.price }}</span>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="u-p-l-30 u-p-r-30 u-m-l-20 u-m-r-20 u-radius-20 u-back-white">
      <view class="u-flex u-row-between u-p-t-30 u-p-b-30" :class="[6].includes(item.id) ? '' : 'u-line-bottom'"
        v-for="item in useList" :key="item.name" @click="goUse(item)">
        <view class="u-flex">
          <u-icon :name="item.icon" custom-prefix="custom-icon" color="#31396A" size="38"></u-icon>
          <view class="u-m-l-15 u-m-r-15 u-font-bold u-font-28">{{ item.name }}</view>
          <view class="u-round-tag u-font-24" v-if="item.count > 0">{{ item.count }}</view>
          <u-image width="80rpx" height="38rpx"
            src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20241128687667294651.png"
            v-if="[2].includes(item.id)"></u-image>
        </view>
        <view class="u-flex u-color-darkGray u-font-24">
          <view class="u-m-r-15" v-if="item.desc">{{ item.desc }}</view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <view class="u-m-t-30 u-p-l-30 u-p-r-30 u-m-l-20 u-m-r-20 u-radius-20 u-back-white">
      <view class="u-flex u-row-between u-p-t-30 u-p-b-30" :class="['意见反馈'].includes(item.name) ? '' : 'u-line-bottom'"
        v-for="item in serviceList" :key="item.name" @click="goUse(item)">
        <view class="u-flex">
          <u-icon :name="item.icon" custom-prefix="custom-icon" color="#31396A" size="38"></u-icon>
          <view class="u-m-l-15 u-m-r-15 u-font-bold u-font-28">{{ item.name }}</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <u-modal confirm-color="#e9450d" v-model="show" show-cancel-button title="修改云店名称(8个字以内)"  @confirm="userUpdateShopName(newshop_name)" @cancel="cancel">
      <view class="u-m-20">
        <u-input maxlength='8' v-model="newshop_name" placeholder="请输入云店名称"></u-input>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  userUpdateShopName
} from '@/network/api.js'
export default {
  props: ['userData', 'list', 'useList', 'serviceList', 'goodsList', 'shop_name'],
  data() {
    return {
      presidentText: '立即成为青创私董，获取更多酒局特权',
      newshop_name: '',
      show: false
    }
  },
  methods: {
    setShopName() {
      this.show = true
    },
    cancel() {
      this.show = false
      this.newshop_name = ''
    },
    userUpdateShopName(shop_name) {
      userUpdateShopName({   
        shop_name: shop_name,
        open_id: uni.getStorageSync("openid")
       }).then(res => {
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
          this.$emit("updateShopName", shop_name)
      })
    },
    goModule(val) {
      this.$emit("goModule", val)
    },
    goUse(val) {
      this.$emit("goUse", val)
    },
    goCenter(val) {
      this.$emit("goCenter", val)
    },
    goPartnerCenter() {
      if (this.statusTwo >= 5) {

      } else {
        uni.navigateTo({
          url: "/teaBureau/teaPartnerAgreement/teaPartnerAgreement"
        })
      }
    },
    goGoodsShop() {
      uni.navigateTo({
        url: "/teaBureau/teaPointShop/teaPointShop"
      })
    },
    goGoodDetail(id) {
      uni.navigateTo({
        url: "/teaBureau/teaGoodsDetail/teaGoodsDetail?id=" + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.passway_box {
  padding: 25rpx 30rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.stage_box {
  background: linear-gradient(to bottom, #FFF8F3, #FFF2ED);
  border: 1rpx solid #F1E7DF;
}

scroll-view {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

.recommendItem {
  width: 240rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  margin-right: 25rpx;
  display: inline-block;
  padding: 15rpx;
  height: 100%;

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.line_left {
  width: 9rpx;
  height: 38rpx;
  background: #000000;
  margin-right: 15rpx;
}
</style>